<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-table :data="tableData" border="" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="代课老师">
                <span>{{ props.row.change_teacher }}</span>
              </el-form-item>
              <el-form-item label="调整课节">
                <ul>
                  <li
                    v-for="(item, index) in props.row.adjustclassmap_set"
                    :key="index"
                  >
                    {{ item.initial }}-->{{ item.final }}
                  </li>
                </ul>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column width="80px" label="申请类型">
          <template slot-scope="scope">
            {{ scope.row.change_type ? '代课申请' : '调课申请' }}
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          label="学院"
          prop="cls.school.name"
        ></el-table-column>
        <el-table-column
          width="80px"
          label="班级"
          prop="cls.name"
        ></el-table-column>
        <el-table-column label="课程">
          <template slot-scope="scope">
            {{ scope.row.course_plan.course.name }}
            ({{
              scope.row.course_plan.course.stage
            }})
          </template>
        </el-table-column>
        <el-table-column
          label="教学周期"
          prop="course_plan.teaching_time"
        ></el-table-column>
        <el-table-column
          width="100px"
          label="原上课老师"
          prop="teacher"
        ></el-table-column>
        <el-table-column label="申请时间">
          <template slot-scope="scope">
            {{ scope.row.createtime | datetime }}
          </template>
        </el-table-column>

        <el-table-column label="申请状态" align='center'>
          <template slot-scope="scope">
          <!-- 通过审核按钮 -->
          <div v-show="scope.row.duty!='0'" v-if="scope.row.level=='1'">
            <el-button v-if="scope.row.state==0"
            type="primary"
            size="mini"
            plain
            @click="editState(scope.row.id, 1)"
            >通过</el-button
          >
          <!-- 不通过审核按钮 -->
          <el-button v-if="scope.row.state==0"
            type="danger"
            size="mini"
            plain
            @click="editState(scope.row.id, -1)"
            >不通过</el-button
          >
          <el-tag type="danger" effect="dark" size="medium" v-if="scope.row.state==-1">未通过</el-tag>
          <el-tag type="success" effect="dark" size="medium" v-if="scope.row.state==1">已通过</el-tag>
          <el-tag type="warning" effect="dark" size="medium" v-if="scope.row.state==3">已撤销</el-tag>
          </div>

          <div v-if="scope.row.duty=='0'">
              <el-tag>无须操作</el-tag>
          </div>

          <div v-if="scope.row.duty=='2'">
           <el-button type="warning" @click="revocation(scope.row.id)"
               v-if='scope.row.state==0'>撤销</el-button>
               <el-tag v-if='scope.row.state==3' type="info">已撤销</el-tag>
               <el-tag v-if='scope.row.state==1' type="info">已通过</el-tag>
          </div>
          
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAdjustCourse, editAdjustCourseState,UpdateRoState} from '../../api/courseplan'
export default {
  data() {
    return {
      tableData: [],
    }
  },
  created() {
    this.getAdjustCourse()
  },
  methods: {
    //获取调课记录
    async getAdjustCourse() {
      const { count, data } = await getAdjustCourse()
      if (data){
        const levels=window.sessionStorage.getItem('level')
        const dutys=window.sessionStorage.getItem('duty')
        this.tableData=data
        this.tableData.forEach(item=>{
          item.level=levels
          item.duty=dutys
        })
        console.log(this.tableData);
      }
    },

    async revocation(a){
      const result = await UpdateRoState(a)
      this.$message.success('撤销成功')
      this.getAdjustCourse()
    },

    //调课审核
    async editState(id,state){
      const result= await editAdjustCourseState(id,{state})
      if(result){
        this.$message.success('审核成功~')
        this.getAdjustCourse()
      }
    }
  },
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand >>> label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-form-item ul {
  margin: 0;
  list-style: none;
}
</style>
